﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>我的课表</title>
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <link href="../css/reset.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../css/animate.css">
    <link href="http://at.alicdn.com/t/font_1473240516_9751368.css" rel="stylesheet">
</head>
<body style="background:#fff;" ms-controller="kcview">
    <div>
        <div class="fixdtop" id="fixdtop">
            <div class="top-week">
                <i class="iconfont icon-left-down" ms-click="GetKCData('pre')"></i><span>第{{KCData.week}}周</span><i class="iconfont icon-right-down" ms-click="GetKCData('nxt')"></i>
            </div>
            <div class="top-day">
                <div class="flex2">{{KCData.month}}月</div>
                <div class="flex1"  ms-repeat-el="KCData.weekDate">
                    <span class="flex-day">{{el.wkDate|date('dd')}}</span>
                    <span class="flex-week">{{el.wkName}}</span>
                </div>
            </div>
        </div>
        <div class="mainstack" id="mainstack">
            <div class="table-list top-day" ms-repeat-el="KCData.kcData">
                <div class="flex2">{{el.time}}</div>
                <div class="flex1" ms-repeat-im="el.weekKC">
                    <div class="course" ms-repeat-kk="el.weekKC[$index]">
                        <div class="content" ms-click="ShowCourse(kk)" >
                            {{kk.KCName}}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="pop-panel">
      <div class="pop-box">
        <div class="pop-cont">
          <div class="course-head">
            <img src="../images/kc.png" width="100%">
          </div>
          <div class="course-list">
            <span class="course-list-tit">课程</span>
            <span class="course-list-cont">{{KCModel.KCName}}</span>
          </div>
          <div class="course-list">
            <span class="course-list-tit">教室</span>
            <span class="course-list-cont">{{KCModel.ClassRoom}}</span>
          </div>
          <div class="course-list">
            <span class="course-list-tit">班级</span>
            <span class="course-list-cont">{{KCModel.Class}}</span>
          </div>
          <div class="course-list">
            <span class="course-list-tit">时间</span>
            <span class="course-list-cont">{{KCModel.SKDate|date('HH:mm')}} ———— {{KCModel.ENDate|date('HH:mm')}}</span>
          </div>
          <div class="btn-pop">
              <a>查看签到情况</a>
              <a>查看签到情况</a>
          </div>
        </div>
        <div class="close-btn">
          <img src="../images/close.png" style="width:5rem;">
        </div>
      </div>
    </div>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> 
    <script src="/ViewMob/js/avalon.mobile.js"></script>
    <script src="/ViewMob/js/ComFunJS.js"></script>
    <script src="/ViewMob/js/zepto.md5.js"></script>
    <script>
        //保持高度相同
        var h = document.getElementById("fixdtop").offsetHeight;
        document.getElementById("mainstack").style.marginTop = h + "px";
        //查看课程动画效果
        $(function () {
         
            $(".close-btn img").click(function () {
                $(".pop-panel").addClass("animated bounceOutDown")
                window.setTimeout(setime, 500);
            })
        })
        function setime() {
            $(function () {
                $(".pop-panel").removeClass("show animated bounceOutDown")
                $(".pop-box").removeClass(" animated bounceInDown");
            })
        }
        var model = avalon.define({
            $id: "kcview",
            KCData: {},
            KCModel:{},
            GetKCData: function (nxt) {
                var wkEnd = "";
                var nxt = "" || nxt;
                if (nxt && model.KCData.weekEnd) {
                    wkEnd = model.KCData.weekEnd;
                }

                model.KCData = {};
                $.getJSON("/API/VIEWAPI.ashx?Action=JSZS_GETKCDATA&r=" + Math.random(), { P1: wkEnd, P2: nxt }, function (result) {
                    if (result.ErrorMsg == "") {
                        model.KCData = result.Result;
                    }
                })
            },
            ShowCourse: function (el) {
                model.KCModel = el;
                $(".pop-panel").addClass("show");
                $(".pop-box").addClass("animated bounceInDown").removeClass("bounceOutDown");
            }

        })
        avalon.ready(function () {
            model.GetKCData();
        })
    </script>
</body>
</html>